<template>
  <label
      class="radio-container"
      :class="[
      `radio--${size}`,
      { 'is-disabled': disabled }
    ]"
  >
    <input
        type="radio"
        class="radio-input"
        :checked="isChecked"
        :disabled="disabled"
        :value="value"
        :name="name"
        @change="handleChange"
        @click="handleClick"
        :aria-label="ariaLabel"
    >
    <span
        class="radio-checkmark"
        :style="checkmarkStyle"
    ></span>
    <span class="radio-label">{{ label }}</span>
  </label>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: { type: [String, Number, Boolean], required: true },
  value: { type: [String, Number, Boolean], required: true },
  label: { type: String, default: '' },
  checked: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  size: {
    type: String,
    default: 'medium',
    validator: (v) => ['small', 'medium', 'large'].includes(v)
  },
  color: { type: String, default: '#3b82f6' },
  name: { type: String, default: '' },
  ariaLabel: { type: String, default: '' }
});

const emit = defineEmits(['update:modelValue', 'change', 'click']);

const isChecked = computed(() =>
    props.modelValue !== undefined
        ? props.modelValue === props.value
        : props.checked
);

const checkmarkStyle = computed(() => ({
  borderColor: props.color,
  backgroundColor: isChecked.value ? props.color : 'transparent'
}));

const handleChange = (e) => {
  if (props.disabled) return;
  emit('update:modelValue', props.value);
  emit('change', props.value);
};

const handleClick = (e) => {
  if (props.disabled) return;
  emit('click', e);
};
</script>

<style scoped>
.radio-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-right: 16px;
}

.radio-input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.radio-checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.2s ease;
}

.radio-checkmark::after {
  content: "";
  position: absolute;
  display: none;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.radio-input:checked ~ .radio-checkmark::after {
  display: block;
}

.radio-input:focus-visible ~ .radio-checkmark {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* 尺寸 */
.radio--small .radio-checkmark {
  width: 16px;
  height: 16px;
}
.radio--small .radio-checkmark::after {
  width: 6px;
  height: 6px;
}

.radio--large .radio-checkmark {
  width: 20px;
  height: 20px;
}
.radio--large .radio-checkmark::after {
  width: 10px;
  height: 10px;
}

/* 禁用状态 */
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>